<template>
  <div style="border: 1px solid #ccc; width: 1000px;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
    />
    <Editor
        style="min-height: 1px; overflow-y: hidden;"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        @onChange="handleChange"
    />
  </div>

</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, defineEmits } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const props = defineProps({
  content: {
    type:String, // 用props接收父组件传递的数据
  }
})
const emits = defineEmits(['getChild'])

//工具栏的配置
const toolbarConfig = {
  // 不需要功能的写下面
  excludeKeys: [
    'blockquote', // 引用
    '|',
    'group-more-style', //下拉菜单
    'color', //颜色
    'bgColor', //背景色
    '|',
    'fontSize', //字号
    'fontFamily', //字体
    'lineHeight', //行高
    '|',
    'todo', //待办
    'group-justify', //对齐
    'group-indent', //缩进
    'emotion', // 表情
    'group-video', //视频
    'insertTable', //表格
    'codeBlock', //代码块
    'divider', //分割线
    'undo', //后退
    'redo', //还原
    'fullScreen' //全屏
  ]
}
//编辑器的配置
const editorConfig = {
  placeholder: '',
  scroll: false,
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const handleChange = (editor) => {
  editorRef.value = editor
  // console.log('content', editor.children)
  // emit('update:content', valueHtml1)
  emits('getChild', valueHtml1)
}
// 内容 HTML
const valueHtml1 = ref(props.content)

</script>

<style>

</style>